<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
  
// //基础使用    
// axios({
//     method: 'get',
//     url: 'http://127.0.0.1:3000/api/get',
// })
// axios({
//     method: 'post',
//     url: 'http://127.0.0.1:3000/api/get',
// })
//传参
/*
axios({
    method: 'get',
    url: 'http://127.0.0.1:3000/api/get',
    params: {
        username: 'zs',
        age: 20
    }
})
axios({
    method: 'get',
    url: 'http://127.0.0.1:3000/api/get?username=zs&age=20'
})
axios({
    method: 'post',
    url: 'http://127.0.0.1:3000/api/get',
    data: {
        username: 'zs',
        age: 20
    }
})
*/
//通过基准地址做简化
//配置全局基准地址
/*
axios.defaults.baseURL = 'http://127.0.0.1:3000'  
axios({
    method: 'get',
    url: '/api/get',
    params: {
        username: 'zs',
        age: 20
    }
})
axios({
    method: 'post',
    url: '/api/get',
    data: {
        username: 'zs',
        age: 20
    }
})
*/
// 在vue当中如何使用axios
// 方式1-每一个页面/组件单独引入
/*
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'  
export default {
    data(){
        return {
            list: []
        }
    },
    async created(){
        let res = await axios({
            method: 'get',
            url: '/api/get',
            params: {
                username: 'zs',
                age: 20
            }
        })
        this.list = res.data.list
    }
}
*/
// 方式2-在main.js设置全局axios
//在main.js当中
// import axios from 'axios'
// import Vue from 'vue'
// axios.defaults.baseURL = 'http://127.0.0.1:3000' 
// Vue.prototype.$axios = axios  
//在页面/组件当中
/*
export default {
    data(){
        return {
            list: []
        }
    },
    async created(){
        let res = await this.$axios({
            method: 'get',
            url: '/api/get',
            params: {
                username: 'zs',
                age: 20
            }
        })
        this.list = res.data.list
    }
}
*/
//方式3.1-模块化请求
//新建utils/request.js
// import axios from 'axios'
// axios.defaults.baseURL = 'http://127.0.0.1:3000'
// export default axios
//新建api/Home.js
/*
import request from '../utils/request'
export function getList(){
    return request({
        method: 'get',
        url: '/api/get',
        params: {
            username: 'zs',
            age: 20
        }
    })
} 
*/
//在页面/组件当中
/*
import {getList} from '../api/Home'
export default {
    data(){
        return {
            list: []
        }
    },
    async created(){
        let res = await getList()
        this.list = res.data.list
    }
}
*/
// 方式3.2-模块化请求
// /http://www.axios-js.com/
// 创建复杂场景-多个请求地址
/*
axios.defaults.baseURL = 'http://127.0.0.1:3000'  
axios({
    method: 'get',
    url: '/api/get',
    params: {
        username: 'zs',
        age: 20
    }
})

axios({
    method: 'post',
    url: 'http://itheima.com/api/login',
    data: {
        username: 'zs',
        password: '123456'
    }
})
*/
//http://www.axios-js.com/zh-cn/docs/#axios-create-config
const request1 = axios.create({
    baseURL: 'http://127.0.0.1:3000'
})
const request2 = axios.create({
    baseURL: 'http://itheima.com'
})

request1({
    method: 'get',
    url: '/api/get',
    params: {
        username: 'zs',
        age: 20
    }
})

request2({
    method: 'post',
    url: '/api/login',
    data: {
        username: 'zs',
        password: '123456'
    }
})
</script>
</html>